<template>
  <div class="details-container">
    <div class="tabBox">
      <div @click="handleTab(1)" style="margin-right: 15px" class="item" :class="tabIndex == 1 ? 'active' : ''">设备详情</div>
      <div @click="handleTab(2)" class="item" :class="tabIndex == 2 ? 'active' : ''">历史数据</div>
    </div>
    
    <template v-if="tabIndex == 1">
      <div v-if="tabIndex == 1" class="checkBox">
        <div class="item" @click="checkIndex = 1" :class="checkIndex == 1 ? 'active1' : ''">设备信息</div>
        <div class="item" @click="checkIndex = 2" :class="checkIndex == 2 ? 'active1' : ''">监测数据</div>
        <div class="item" @click="checkIndex = 3" :class="checkIndex == 3 ? 'active1' : ''">预警信息</div>
        
      </div>
      <device-info v-if="checkIndex == 1"></device-info>
      <Monitoring v-if="checkIndex == 2" />
      <early-warning-info v-if="checkIndex == 3"></early-warning-info>
    </template>
    
    <template v-if="tabIndex == 2">
      <History></History>
    </template>
    
  </div>
</template>
<script setup>
import {ref} from 'vue'
import DeviceInfo from './DeviceInfo.vue';
const tabIndex=ref(1);
const checkIndex=ref(1);
</script>
<style scoped lang="less">
.details-container {
  background: #1A1F4D !important ; // 设置基础背景色
  padding: 20px;       // 添加呼吸空间
  min-height: 100vh;   // 确保高度撑开
}
.checkBox {
  display: flex;
  width: 100%;
  background: #2C3360;
  padding: 24px;
  padding-bottom: 0;
  // margin-top: 18px;
  border-radius: 4px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;

  .item {
    padding-bottom: 21px;
    border-bottom: 3px solid transparent;
    margin-right: 32px;
    cursor: pointer;
    color: #A4A8C4;
  }

  .active1 {
    border-bottom: 3px solid #C3CCFF;
    color: #BFC8FF;
  }
}

.tabBox {
  display: flex;
  width: 100%;
  margin:  0px 0px 10px 0px;
  .item {
    width: 90px;
    height: 36px;
    background: #EEF1F3;
    border-radius: 4px;
    color: #6C7880;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .active {
    background: #2F6FC1;
    color: #fff;
  }
}
</style>